<template>
	<view class="page">
		<u-tabs :list="list" :is-scroll="false" bg-color="#357BED" active-color="#fff" bar-width="100" :bar-style="{bottom: '-4rpx'}" inactive-color="rgba(255,255,255,0.5)" bar-height="4" :bold="false" :current="current" @change="change"></u-tabs>
		<view v-if="current == 0" class="card">
			<view class="title">
				设备监控数据
			</view>
			<view class="row u-flex u-row-between">
				<view v-for="item in 5" class="item u-flex u-row-center">
					<text>报警</text>
					<text>0</text>
				</view>
			</view>
		</view>
		<view class="dropdown">
			<u-dropdown border-bottom>
				<u-dropdown-item v-model="value1" title="设备类型" :options="options1"></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="设备状态" :options="options2"></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="单位区域" :options="options2"></u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="list">
			<view v-for="(item,index) in 10" class="item">
				<view class="body">
					<view class="header u-flex u-row-between">
						<view class="title">
							<u-icon style="margin-right:10rpx" name="arrow-right" color="#d2dff0" size="34" />
							<text>郭沫若旧居</text>
						</view>
						<view class="status u-flex u-row-center">
							<text>正常</text>
							<u-icon style="margin-left:10rpx" name="arrow-right" color="#d2dff0" size="28" />
						</view>
						
					</view>
					<view class="infor">
						<view class="infor-2">
							<text>设备设备</text>
							<text>设备设备</text>
						</view>
						<view class="infor-2">
							<text>设备设备</text>
							<text>设备设备</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
import axios from '@/axios';
export default {
	data() {
		return {
			list: [{
				name: '消防'
			}, {
				name: '安防'
			}, {
				name: '防雷',
			}],
			current: 0,
			value1: 1,
			value2: 2,
			options1: [{
					label: '默认排序',
					value: 1,
				},
				{
					label: '距离优先',
					value: 2,
				},
				{
					label: '价格优先',
					value: 3,
				}
			],
			options2: [{
					label: '去冰',
					value: 1,
				},
				{
					label: '加冰',
					value: 2,
				},
			],
			options3: [{
					label: '默认排序',
					value: 1,
				},
				{
					label: '距离优先',
					value: 2,
				},
				{
					label: '价格优先',
					value: 3,
				}
			],
		}
	},
	methods: {
		change(index) {
			this.current = index;
		},
		getList() {	
			// let login = 
			axios.post('SJL/XQuery',{

			})
		}
	},
	created() {
			
	},
}
</script>

<style scoped lang="scss">
	.page {
		background: rgb(244,244,244);
		min-height: 100vh;
	}
	
	.card {
		margin: 0rpx 30rpx 8rpx;
		padding:30rpx 0;
		border-radius: 20rpx;
		background-color: #fff;
		.title {
			font-size: 30rpx;
			padding: 0 30rpx 38rpx;
			color: #2e86ff;
		}
		.item {
			flex-direction: column;
			flex: 1;
			position: relative;
			font-size: 29rpx;
			color: #080808;
			text:nth-of-type(1) {
				margin-bottom: 15rpx;
			}
		}
		.item::after {
			height: 66rpx;
			width: 2rpx;
			background: #E4E7ED;
			display: block;
			content: '';
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}
		
		.item:nth-last-of-type(1)::after {
			background: #fff;
		}
	}
	.dropdown {
		background: #fff;
	}
	.list {
		padding: 5rpx 0;
		.item {
			background-color: #fff;
			padding: 30rpx;
			margin-bottom: 14rpx;
			.body {
				color: #383838;
				flex: 1;
				.header {
					padding-bottom: 35rpx;
					font-size: 29rpx;
					border-bottom: 1rpx solid #E4E7ED;
					.title {
						font-weight: bold;
					}
				}
				.infor {
					font-size: 28rpx;
					flex: 1;
					.infor-2 {
						font-size: 28rpx;
						color: #9e9e9e;
						padding-left: 40rpx;
						padding-top: 20rpx;
						text:nth-last-of-type(1) {
							color: #000;
						}
					}
				}
			}
			
		}
	}
	
	
		
	
</style>